<template>
  <div>
    <h2>{{ msg }}</h2>
    <!-- v-model 后有三个属性可选，lazy | trim | number  lazy是input失去焦点后绑定数据；trim是去除空格；number是限定数字 -->
    <input type="text" v-model.number="username" />
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "WatchAttribute",
  props: {
    msg: String,
  },
  data() {
    return {
      username: "",
    };
  },
  computed: {
      /* 
        计算属性 VS 侦听器
        侧重的应用场景不同：
            1. computed 属性侧重监听多个数据的变化，并返回一个计算出的新值；
            2. watch 属性侧重于监听单个数据的变化，最终执行特定的业务处理，不需要有任何返回值。
      */
  },
  /* 
    watch 监听 data 中的数值，要监听的数值只要变化，就执行watch
        1. 默认情况下，变量被初始化的时候，watch不会立即执行，如果想要立即执行，使用 watch 的immediate 属性。
        2. 如果watch监听的是一个对象，则对象中的属性值变化，watch无法监听到。如果想要监听，使用 watch 的 deep 属性。
  */
  watch: {
    /* watch 基本使用 */
    //   username(newValue, oldValue){
    //       console.log('new:',newValue);
    //       console.log('old:',oldValue);
    //   }

    /* 
        使用 axios 检查用户名是否可用
        1. 安装 axios : npm i axios -S
        2. axios 返回一个 promise 对象，可以用 await 简化成真正的数据对象
        3. 有 await ，函数名前面必须加 async 修饰
     */
    async username(newValue) {
      console.log("newvalue:", newValue);
      //   axios 返回一个 promise 对象，可以用 await 解构成真正的数据对象
      //   const res = await axios.get("https://www.escook.cn/api/finduser/" + newValue);
      //   返回的数据对象中只有 data 属性有意义，我们可以用 {data} 来结构赋值，用{data ：res} 给data部分重命名
      if (newValue) {
        const { data: res } = await axios.get(
          "https://www.escook.cn/api/finduser/" + newValue
        );
        console.log("res:", res);
      }
    },
  },
  methods: {},
  updated() {
      /* 
        template中绑定的值变化了就会触发 updated
      */
     console.log('updated');
  },
};
</script>
<style scoped></style>
